<template>
  <div class="box">
    <h1>父组件</h1>
    <h2>自己的钱：{{ money }}</h2>
    <Son></Son>
  </div>
</template>

<script>
import { provide, ref } from 'vue'
import Son from './components/Son16.vue'
/* 
  目标：掌握使用provide函数和inject函数完成后代组件数据通讯

  provide 函数：
    作用：
      provide函数，把数据或函数提供给所有子孙后代组件
    语法：
      provide('key', value)
  inject 函数：
    作用：
      inject 函数，根据键名称获取到 provide 定义的数据。
    语法：
      const value = inject('key')
*/
export default {
  components: { Son },
  setup() {
    console.log('setup组合API的起点')

    const money = ref(1000)

    // provide 函数，把数据或函数提供给所有子孙后代组件
    // 语法：provide('key', value)
    provide('money', money)
    provide('changeMoneyFn', number => {
      money.value -= number
    })

    return { money }
  },
}
</script>

<style>
.box {
  background-color: antiquewhite;
  padding: 20px;
}
</style>
